<template>
  <div class="middlebutton" ref="box" style="width: 100%; height: 100%">
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
    <div class="map"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { nameMap } from "@/assets/nameMap.js";
import { dataMap } from "@/assets/dataMap.js";
import world from "@/assets/world.js";

export default {
  data() {
    return {};
  },
  mounted() {
    var chartDom = document.querySelector(".map");
    var myChart = echarts.init(chartDom);
    // 设置配置项
    let option = {
      
      series: [
        {
          type: "map", //   系列的类型
          mapType: "world", //  地图类型
          data: dataMap, //   各个国家肺炎感染数据
          nameMap: nameMap, //    翻译国家名称（英文-->中文）
          // 鼠标没有悬浮时候样式
          itemStyle: {
            areaColor: "#dddffa",
          },
        
        },
      ],
      //   视图映射
      visualMap: {
        //定制样式
        pieces: [
          { min: 0, max: 0, label: 0, color: "#eeeeee" },
          { min: 1, max: 10, label: "1-1000", color: "#fff7ba" },
          { min: 10, max: 20, label: "1000-2000", color: "#ffc24b" },
          { min: 20, max: 30, label: "2000-3000", color: "#ff7c20" },
          { min: 30, max: 100, label: "3000-4000", color: "#fe5e3b" },
          { min: 100, label: ">10000", color: "#e2482b" },
        ],  
        type: "piecewise", //  切片效果
        itemWidth: 25, //  视图映射的宽度
        itemHeight: 15, //   视图映射的高度
        
        min: 0,
        max: 1400000,
        // 是否反转y轴
        inverse: true,
        textStyle: {
          color: "#ffffff",
        },
        bottom: "80",
      },
    };
    option && myChart.setOption(option);
  },
};
</script>

<style lang="scss" scoped>
.middlebutton {
  position: relative;
  
  .bg1 {
    height: 518px;
    width: 518px;
    background: url(../assets/img/map.bab2b509.png) no-repeat center;
    background-size: 75% 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    // animation: rotate3 10s linear infinite;
    
  }
  .bg2 {
    width: 566px;
    height: 566px;
    background: url(../assets/img/jt.c268bab5.png) no-repeat center;
    background-size: 75% 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    animation: rotate2 10s linear infinite;
  }
  .bg3 {
    height: 643px;
    width: 643px;
    background: url(../assets/img/lbx.0dea0f97.png) no-repeat center;
    background-size: 75% 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    animation: rotate1 10s linear infinite;
  }
  .map {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
  }
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotate3 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
} 
 
</style>